<template>
  <div class="login-container">
    <div class="login-panel">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="login-form">
        <el-form-item label="机构号" prop="instNo">
          <el-input v-model="ruleForm.instNo" placeholder="请输入机构号" :maxlength="6"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPwd">
          <el-input v-model="ruleForm.userPwd" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="login-button" @click="handleLogin">登陆</el-button>
    </div>
  </div>
</template>

<script>
import router from '../router'
import util from '../utils.js'

export default {
  name: 'Login',
  data () {
    return {
      ruleForm: {
        instNo: '',
        username: '',
        userPwd: '',
      },

      rules: {
        instNo: [
          {required: true, message: '机构号不能为空', trigger: 'blur'},
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'},
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        userPwd: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {

    //
    handleLogin () {
      /****=========================================== */
      var userInfo = new Object()
      userInfo['username'] = this.ruleForm.username
      userInfo['password'] = this.ruleForm.userPwd
      userInfo['instNo'] = this.ruleForm.instNo
      this.axios.post('/zyapply-api/loginController/login', JSON.stringify(userInfo), {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      })//JSON.stringify(this.userInfo)
        .then(res => {
          if (res.status == 200 && res.data.status == 200) {
            sessionStorage.setItem('username', this.ruleForm.username)
            sessionStorage.setItem('instNo', this.ruleForm.instNo)
            sessionStorage.setItem('token', res.data.data)
            this.$store.commit('title', '选择产品')
            router.push({name: 'Product'})
          } else {
            // this.errorValid("机构号或用户名或密码错误");
            this.$message.error('机构号或用户名或密码错误!')
            return false
          }
        })
        .catch(err => {
        })

    },
    //
    errorValid (errorInfo) {
      const h = this.$createElement
      this.$message({
        message: h('p', null, [
          h('span', null, ''),
          h('i', {style: 'color: teal'}, errorInfo)
        ])
      })
    }

  },
  components: {},
  mounted () {
    this.$store.commit('title', '用户登录')
  }

}
</script>

<style lang="scss" scoped>
  .login-container {
    background: url("../assets/bg.jpg") bottom;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    .login-panel {
      max-width: 400px;
      background: rgba(255, 255, 255, 0.7);
      padding: 50px;
      border-radius: 5px;
      .login-button {
        width: 100%;
      }
    }
  }
</style>
